<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<style type="text/css">
			body,
			.mui-content {
				background-color: #000;
				color: #fff;
			}
			
			.mui-input-group {
				background-color: #CCCCCC;
				color: #444;
			}
			
			.title {
				margin: 35px 15px 10px;
			}
			
			.title+.content {
				margin: 10px 15px 35px;
				color: #bbb;
				text-indent: 1em;
				font-size: 14px;
				line-height: 24px;
			}
			
			.mui-table-view {
				margin-bottom: 35px;
			}
			
			#token {
				background: 0, 0;
				border: 0;
				border-bottom: 1px solid #ABCDEF;
				border-radius: 0;
			}
			
			.copy {
				text-align: center;
				position: fixed;
				bottom: 10px;
				width: 100%;
				font-size: 12px;
			}
			
			#bcid {
				width: 100%;
				position: fixed;
				top: 30%;
				bottom: 44px;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div class="mui-content " id="login">
			<div class="title">你还没有登录</div>
			<ul class="mui-table-view  mui-table-view-inverted" style="color: #ddd;">
				<li class="mui-table-view-cell">
					<div class="mui-input-row">
						<input type="text" id="token" value="uhedu1vmq4g83rdro7kl2ctj7c" class="mui-input-clear" placeholder="Access Token">
					</div>

					<div class="mui-button-row">
						<button type="button" class="mui-btn mui-btn-grey" onclick="check();"> 点击登录</button>&nbsp;&nbsp;
						<button type="button" class="mui-btn mui-btn-grey" onclick="qr();">扫描二维码</button>
					</div>
				</li>
			</ul>
			<div id="bcid">
				<div style="height:40%"></div>
				<p class="tip"></p>
			</div>
		</div>

		<div class="mui-content mui-hidden" id="infos">
			<div class="title">用户信息</div>
			<div class="content">
				<p>
					<img id="head" width="80%" />
				</p>
				<p>用户名: <span id="name"></span></p>
				<p>积分:<span id="score"></span></p>
			</div>
			<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted" style="color: #ddd;">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" open-type="common" href="pages/pullrefresh_main.html">
						最近发表
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" open-type="common" href="pages/offcanvas-drag-left.html">
						最近回复
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="pages/switches.html">
						版本信息
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="pages/tableviews-with-swipe.html">
						更多设置
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a id="logout" class="mui-navigate-right" onclick="logout()">
						退出登录
					</a>
				</li>
			</ul>
		</div>
		<div class="mui-content copy">
			Powered By Hbuilder CopyRight © nutz.cn
		</div>
		<script src="js/mui.min.js"></script>
		<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			function qr() {
				$('.tip').html('...载入中...');
				var scan = new plus.barcode.Barcode('bcid');
				scan.onmarked = function(type, result, file) {
					mui.post('https://nutz.cn/yvr/api/v1/accesstoken', {
						accesstoken: result
					}, function(data) {
						if (data.success) {
							plus.storage.setItem('loginname', data.loginname);
							setTimeout(function() {
								init();
							}, 2000);
						} else {
							mui.toast('兽总说:你是坏人,不准使用....')
						}
					}, 'json');
				};
				scan.start({
					conserve: true,
					filename: "_doc/barcode/"
				});
			}

			function logout() {
				plus.storage.removeItem('loginname');
				setTimeout(function() {
					location.reload();
				}, 2000)
			}

			function check() {
				mui.post('https://nutz.cn/yvr/api/v1/accesstoken', {
					accesstoken: $('#token').val()
				}, function(data) {
					if (data.success) {
						plus.storage.setItem('loginname', data.loginname);
						setTimeout(function() {
							init();
						}, 2000);
					} else {
						mui.toast('兽总说:你是坏人,不准使用....')
					}
				}, 'json');
			}

			function init() {
				var user = plus.storage.getItem('loginname');
				if (user) {
					//显示用户信息
					$('#login').addClass('mui-hidden');
					//发送请求获取用户信息
					mui.get('https://nutz.cn/yvr/api/v1/user/' + user, {}, function(data) {
						$('#head').attr('src', data.data.avatar_url);
						$('#name').html(data.data.loginname);
						$('#score').html(data.data.score);
					}, 'json');
					$('#infos').removeClass('mui-hidden');
				} else {
					//显示登录框
				}
			}
			var aniShow = "slide-in-right";
			//关于backbutton和menubutton两个按键的说明，在iOS平台不存在，故需隐藏
			if (!mui.os.android) {
				var span = document.getElementById("android-only")
				if (span) {
					span.style.display = "none";
				}
				aniShow = "pop-in";
			}
			var subWebview = null,
				template = null,
				index = null;
			mui.plusReady(function() {
				//获得主页面webview引用；
				index = plus.webview.currentWebview().opener();
				//获取用户
				init();
			})
			mui('.mui-table-view').on('tap', 'a', function() {
				console.log(1);
			});
			/**
			 * 关闭侧滑菜单
			 */
			function close() {
				mui.fire(mui.currentWebview.opener(), "menu:close");
			}
			//点击“关闭侧滑菜单”按钮处理逻辑
			//在android4.4.2中的swipe事件，需要preventDefault一下，否则触发不正常
			window.addEventListener('dragstart', function(e) {
				mui.gestures.touch.lockDirection = true; //锁定方向
				mui.gestures.touch.startDirection = e.detail.direction;
			});
			window.addEventListener('dragleft', function(e) {
				if (!mui.isScrolling) {
					e.detail.gesture.preventDefault();
				}
			});
			//监听左滑事件，若菜单已展开，左滑要关闭菜单；
			window.addEventListener("swipeleft", function(e) {
				if (Math.abs(e.detail.angle) > 170) {
					close();
				}
			});
		</script>
	</body>

</html>